<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="订单评价"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false"
			@scrolltolower="loadMore" @scrolltoupper="refresh">
			<view class="fixed-top bg-white">
				<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
					:key="index">
					<view class="font-md" :class="tabIndex === index ? 'text-8ED0F2 font-weight-bold font-lg':''">
						{{item.name}}
					</view>
				</view>
				<u-gap height="20" bg-color="#f7f7f7"></u-gap>
			</view>
			<view style="margin-top: 55px;">
				<view class="border-bottom pr-3 pl-3" v-for="(item, index) in list" :key="index">
					<view class="dfes  py-3">
						<img :src="getFullImageUrl(item.downAvatar)" class="rounded-circle"
							style="width: 52px; height: 52px;" />
						<view class="pl-2 lineHight-2">
							<view class="font-14"> {{tabIndex === 0 ? item.serviceName : item.title}}</view>
							<view class="text-A0A0A0 font-12">{{item.updateTime}}</view>
						</view>
					</view>
					<view class=" lineHight font-14">{{item.orderEvaluation}}</view>
					<view class="lineHight-3 font-14">评价回复：{{item.orderEvaluationReply}}</view>
				</view>
			</view>
			<view v-if="!hasMore && list.length > 0" class="text-center mt-3 mb-3">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && list.length === 0" class="text-center mt-3 mb-3">
				<view class="iconfont text-999999 icon-zanwushuju font-48 pb-1"></view>
				<view class="text-999999 font-15">暂无数据</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		data() {
			return {
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				tabBars: [{
						"id": 1,
						"name": "上游订单评价",
					},
					{
						"id": 2,
						"name": "下游订单评价",
					},
				],
				tabIndex: 0,
				list: []
			}
		},
		onLoad() {
			this.NewList()
		},

		methods: {
			// 拼接图片方法
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			NewList() {
				const api = this.tabIndex === 0 ?
					'/upper/upperMarketOrder/agriculture/orderEvaluationReplyList' :
					'/down/downServiceOrder/agriculture/orderEvaluationReplyList';

				$H.get(api, {
					...this.form
				}, {}).then(res => {
					this.list = res.result.records
					this.form.total = res.result.total;
					this.hasMore = this.list.length < this.form.total;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.list = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
			// 切换标签页
			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.NewList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}

	.tab-item {
		width: 50%;
		display: inline-block;
		text-align: center;
		padding: 0 10px;
		line-height: 40px;
	}
</style>